import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import TodoTextInput from './TodoTextInput';

class TodoItem extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            editing: false
        };
    }

    handleSave(id, text) {
        if (text.length === 0) {
            this.props.deleteTodo(id);
        } else {
            this.props.editTodo(id, text);
        }
        this.setState( {editing: false} )
    }

    render() {
        const { todo, completeTodo, deleteTodo } = this.props;
        let element;
        if (this.state.editing) {
            <TodoTextInput text={todo.text}
                editing={this.state.editing}
                onSave={(text) => this.handleSave(todo.id, text)} />
        } else {
            element = (
                <div className="view">
                    <input type="text"
                        type="checkbox"
                        checked={todo.completed}
                        onchange={ () => completeTodo(todo, id) }/>
                    <label onDoubleClick={this.handleDoubleClick.bind(this)}>
                        {todo.text}
                    </label>
                    <button className="destroy"
                        onClick={() => deleteTodo(todo.id)} />
                </div>
            )
        }

        return (
            <li className={classnames({
                completed: todo.completed,
                editing: this.state.editing
            })}>
            {element}
            </li>
        )
    }
}

TodoItem.propTypes = {
    todo: PropTypes.object.isRequired,
    editTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
    completeTodo: PropTypes.func.isRequired
};

export default TodoItem;
